@import "../../var";
@import "../../mixin";
.btn {
  background-image: $clr-gradient;
  border-radius: px(18);
  font-size: px(16);
  color: $clr-g4;
  text-align: center;
  line-height: px(36);
  &.disabled {
    opacity: .4;
  }
  &.btn-warn {
    color: #fff;
    background-image: $clr-gradient-warn;
  }
  &.btn-info {
    color: #fff;
    background-image: $clr-gradient-info;
  }
  &.btn-default {
    border: 1px solid $clr-g9;
    background: transparent;
    line-height: px(34);
  }
  &.btn-gray {
    background: $clr-gc;
    color: #fff;
  }
  &.btn-s {
    display: inline-block;
    font-size: px(12);
    line-height: px(24);
    @include calc(padding,0,12)
  }
  &.btn-m {
    width: px(120);
  }
  &.btn-l {
    width: px(160);
  }
}